<template>
    <div :ref="drop">
        <n-form ref="formRef" :class="$attrs.class" v-bind="$attrs.props">
            <component @click.stop="selectComponent(body.id)" :class="{ 'drag-area': body.selected }"
                v-for="body in $attrs.body" :key="body.id" :is="components.get(body.type)" v-bind="body">
            </component>
            <div class="flex justify-end">
                <n-button type="success" :size="$attrs.submitSize || 'medium'" dashed>
                    {{ $attrs.submitText || "提交" }}
                </n-button>
            </div>
        </n-form>
    </div>
</template>
<script>
import { defineComponent, ref, computed, watch } from "vue";
import { NForm, NButton } from "naive-ui";
import { useFormJsonStore } from '../../stores/form-json.js'
import { useDrop } from 'vue3-dnd'
import { toRefs } from '@vueuse/core'

export default defineComponent({
    name: 'XForm',
    components: {
        NForm,
        NButton,
    },
    props: {
    },
    created() {
        console.log(this.$attrs)
        this.$options
    },
    setup(props, { attrs }) {
        const [collect, drop] = useDrop(() => ({
            accept: ['XInput', 'XSelect'],
            drop(item, monitor) {
                const didDrop = monitor.didDrop()
                console.log(item)
                console.log(didDrop)
                formJsonStore.setFormJson("1235465767", item)
                console.log(formJsonStore.getFormJson())
            },
            hover: (item, monitor) => {
                console.log(item, monitor)
                monitor.isOver({ shallow: true })
            },
            collect: (monitor) => ({
                isOver: monitor.isOver(),
                canDrop: monitor.canDrop(),
            }),
        }))

        // const { canDrop, isOver } = toRefs(collect)
        // const isActive = computed(() => unref(canDrop) && unref(isOver))
        // const backgroundColor = computed(() =>
        //     unref(isActive) ? 'bg-gray-200' : unref(canDrop) ? 'bg-gray-200' : 'bg-white'
        // )


        const formRef = ref(null);

        const formJsonStore = useFormJsonStore()
        const selectComponent = (id) => {
            formJsonStore.setCurrentFormJson(id)
        }

        const handleValidateClick = (e) => {
            e.preventDefault();
            formRef.value?.validate((errors) => {
                if (!errors) {
                    message.success("Valid");
                } else {
                    message.error("Invalid");
                }
            });
        }

        const components = new Map()

        // 导入表单组件
        const forms = import.meta.glob('./*.vue',
            {
                eager: true,
                import: "default"
            }
        )
        // 导入布局组件
        const layouts = import.meta.glob('../layout/*.vue',
            {
                eager: true,
                import: "default"
            }
        )

        Object.keys(forms).forEach((key) => {
            const defaultObject = forms[key]
            components.set(defaultObject.name, defaultObject)
        })

        Object.keys(layouts).forEach((key) => {
            const defaultObject = layouts[key]
            components.set(defaultObject.name, defaultObject)
        })

        return {
            components,
            drop,
            selectComponent,
            handleValidateClick,
        };
    }
});
</script>